<template>
	<!-- 员工详情 -->
  <div class="stu">
	 <el-dialog v-loading="loading"  :title="num==1?'编辑住房保障信息':'新增住房保障信息'" :visible.sync="dialogVisible" width="35%" :before-close="handleClose" :close-on-click-modal='false'>
	    <div style="width:100%;padding-bottom:20px;">
	    	<div style="margin-top:10px;" class="tabbox">
	    			<p style="width:15%;"><a style="color:red;">* </a>家庭</p>
	    			<el-select style="width:75%;border:none;" class="pboxc1" v-model="activess.family_id" clearable filterable placeholder="请选择">
	    			  <el-option v-for='item in $store.state.jia_ting' :key='item.family_id' :label="item.pop_name" :value="item.family_id"></el-option>
	    			</el-select>
	    	</div>
			<div style="margin-top:10px;" class="tabbox">
					<p style="width:15%;"><a style="color:red;">* </a>享受政策</p>
					<el-select style="width:75%;border:none;" class="pboxc1" v-model="activess.party_build_id" clearable filterable placeholder="请选择">
					  <el-option v-for='item in $store.state.tpzc_id' :key='item.id' :label="item.title" :value="item.id"></el-option>
					</el-select>
			</div>
	    	<div style="margin-top:10px;" class="tabbox">
	    			<p style="width:15%;"><a style="color:red;">* </a>住址</p>
	    			<el-input style='width:75%;' placeholder="请输入" v-model="activess.address" clearable></el-input>
	    	</div>
	    	<div style="margin-top:10px;" class="tabbox">
	    			<p style="width:15%;"><a style="color:red;">* </a>房屋结构文案</p>
	    			<el-input style='width:75%;' placeholder="请输入" v-model="activess.house_struct_text" clearable></el-input>
	    	</div>
	    	<div style="margin-top:10px;" class="tabbox">
	    			<p style="width:15%;"><a style="color:red;">* </a>建筑面积</p>
	    			<el-input style='width:75%;' type='number' min='0' placeholder="请输入" v-model="activess.house_area" clearable>
	    				<template slot="append">㎡</template>
	    			</el-input>
	    	</div>
			
			<div class="tabbox" style="height:155px;margin-top:10px;">
					<p style="width:15%;"><a style="color:red;">* </a>图片</p>
					<div style="width:50%;height:100%;overflow: hidden;">
							<el-upload
										:limit='2' 
										action="/dj/index/import_pic"
										name='img'
										accept='image/jpeg, image/png, image/jpg'
										:on-success='qing_sur'
										:file-list='img_files1'
									    list-type="picture-card" :on-remove="handleRemove"><i class="el-icon-plus"></i>
							</el-upload>
					</div>
			</div>
			
	    </div>	
		<div style="width:100%;height:40px;margin-top:20px;">
	      <div style="width:170px;margin: 0 auto;">
	        <el-button type="danger" @click="handleClose">取 消</el-button>
	        <el-button type="primary" style='float:right;' @click="git_acts">确 定</el-button>
	      </div>
		</div>
	 </el-dialog>
	
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  name: 'stu',
  components: {},//声明子组件
  computed:{
	 img_files1(){return this.ader},//图片反向赋值
	 
  },
  data(){
	  return {
		loading:false,
		btn_shou:false,
		dialogVisible: false,
		activess:{
			  party_build_id:'',//享受政策ID
			  img:[],//图片
			  address:'',//住址
			  house_struct_text:'',//房屋结构文案  （砖混）
			  house_area:'',//建筑面积
			  family_id:'',//家庭ID
			  id:'',//主键,
		},
		
		renbox:[],
		num:0,
		ader:[],
	  }
  },
  methods:{
	  git_act(i,nums){//获取数据的同打开狂口
	      if(nums==1){
			  this.activess = i;
			  console.log(this.activess,nums,'123123');
			  // this.activess.is_out = this.activess.is_out+'';
			  if(this.activess.img){
				  let img = this.activess.img.split(",");
				  for(let i=0;i<img.length;i++){
					  this.ader.push({name:'123',url:img[i]});
				  }
				  this.activess.img = this.activess.img.split(",");
			  }
		  }
		  this.num = nums;
	      this.dialogVisible=true;
	  },
	  git_acts(){//提交数据
	        console.log(this.activess);
	        if(this.isNull(this.activess.family_id)){this.$message.error('请选择 家庭');return false}
			if(this.isNull(this.activess.party_build_id)){this.$message.error('请选择 享受政策');return false}
	  		if(this.isNull(this.activess.address)){this.$message.error('请输入 住址');return false}
			if(this.isNull(this.activess.house_struct_text)){this.$message.error('请输入 房屋结构文案');return false}
			if(this.isNull(this.activess.house_area)){this.$message.error('请输入 建筑面积');return false}
			if(this.activess.house_area<0){this.$message.error('建筑面积不能小于零');return false}
			if(this.activess.img.length==0){this.$message.error('请上传至少一张图片');return false}
			 this.activess.img = this.activess.img.join(",");
	  		 let url = this.num==1?'/dj/user_pc/house_modify':'/dj/user_pc/house_add';
	  		 $.ajax({url:url,type:'post',data:this.activess,dataType:'json',success:(res)=> {
	  		 	if(Object.prototype.toString.call(res) != '[object Object]'){res = JSON.parse(res)}
	  		 	 console.log(res,'提交');
	  		 	 if(res.code==200){
	  				this.$parent.git_act();
	  		 		this.$message({message: '操作成功',type: 'success'});
	  		 		this.dialogVisible=false;
	  				this.qin();
	  		 	  }else{
	  		 		 this.$message.error(res.msg);
	  		 	  }
	  		 	}
	  		 })
	  },
	  qin(){//清除
	    this.ader = [];
	  	this.activess={
			  party_build_id:'',//享受政策ID
			  img:[],//图片
			  address:'',//住址
			  house_struct_text:'',//房屋结构文案  （砖混）
			  house_area:'',//建筑面积
			  family_id:'',//家庭ID
			  id:'',//主键,
		}
	  },
	  
	  handleClose(done){//监测用户点击x
	     this.$confirm('确定取消关闭吗？','提示',{confirmButtonText:'确定',cancelButtonText:'取消',type: 'warning'}).then(() => {
	  	   this.dialogVisible = false;
	  	   this.qin();
		   this.$parent.git_act();
	  	}).catch(() => {});
	  },
	  
	  handlePictureCardPreview(file) {//查看大图
	          this.dialogImageUrl = file.url;
	          this.dialogVisible2 = true;
	  },
	  qing_sur(response, file){//上传照片
	  		if(response.code==200){
	  			this.activess.img.push(response.data);
	  			console.log(this.activess.img,'123123');
	  			this.$message({message: '上传成功',type: 'success'});
	  		}else if(response.code==300){
	  			this.$message.error('无法上传动态图片！');
	  		}else{this.$message.error('上传失败');console.log(response);}
	  },
	  handleRemove(file) {//删除图片
	     
		 console.log(file,'单个删除');
		 
		 if(file.response){
			 for(let i=0;i<this.activess.img.length;i++){
			  if(file.response.data==this.activess.img[i]){
				 this.activess.img.splice(i,1)
			  }
		     }
		 }else{
			 for(let i=0;i<this.activess.img.length;i++){
			  if(file.url==this.activess.img[i]){
			 		this.activess.img.splice(i,1)
			  }
			 }
		 }
		 console.log(this.activess.img,'结果')
	  }, 
	  
  },
  mounted(){
	  // this.git_ren()
  }
}
</script>
<style scoped="scoped">
	
	.pboxc1{
		float:left;
		width:70%;
		height:40px;
		border:1px solid rgba(242,242,242,1);
		font-size:14px;color:#666666;
		/* padding-left:18px; */
		text-align:left;
		/* overflow: hidden; */
		/* text-overflow:ellipsis; */
		/* white-space: nowrap; */
	}
	.tabbox{
		width:100%;
		height:40px;
		line-height: 30px;
		margin-top:23px;
	}
	.tabbox p{
		font-size:14px;
		color:#000000;
		width:19.5%;
		text-align:right;
		margin-right:28px;
		float:left;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		font-family:Source Han Sans CN;
	}
	.pbox{
		width:10%;
		text-align:right;
		height:26px;
		margin-bottom:20px;
		font-size:18px;
		color:#000101;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		font-family:Source Han Sans CN;
		font-weight:600;
	}
</style>
